<template>
  <div style="width: 100%;height:900px;">
    <div style="width:580px;margin: 0 auto;">
      <p style="margin-top: 20px;font-size:22px;font-weight: bold;margin-bottom: 30px;text-align: center;">编辑个人信息</p>
      <el-form ref="form" :model="form" label-width="75px">
        <el-form-item label="昵称：">
          <el-input @input="isname(zhuceData.loginName)"  :maxlength="10" style="height: 30px;width:500px;" v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="地区：">
          <el-cascader
            style="width: 500px;"
            size="large"
            :options="regionData"
            v-model="form.pickLocation"
            :props="{ label:'label',value:'label'}"
            :placeholder="form.userAddress"
            clearable
            filterable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="头像：">
          <el-upload
            :file-list="fileList1"
            list-type="picture-card"
            :auto-upload="false"
            :action="srcA"
            :on-change="afterRead"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus">

            </i>

          </el-upload>
          （可以多个图片进行筛选，默认最后一个修改无需删除）
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <div style="width:95%;height:70px;margin-left:20px;margin-bottom: 30px;">
          <div style="background-color:#E7A84F;width:50px;height:50px;border-radius:50%;line-height: 50px;text-align: center;float: left;margin-top: 10px;">
            <img style="margin-top: 9px;" src="../assets/shouji1.png">
          </div>
          <div style="float: left;margin-left:10px;color:grey;font-size:16px;margin-top: 16px;">
            <div style="font-size:14px;">手机</div>
            <div style="font-size:14px;">使用手机号注册：<span>{{this.userPhone}}</span><span style="margin-left: 10px;color:#75BAE4;">更换手机</span></div>
          </div>
          <div style="float: right;">
            <el-button style="margin-top: 18px;" size="small" round @click="openChangePassword">修改密码</el-button>
          </div>
        </div>
        <el-form-item style="margin-bottom: 20px;">
          <el-button size="medium" round @click="preserve()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="xiugaimima" style="float:left;width: 420px;margin-left:40%;">
      <p style="margin-top: 26px;font-size:22px;font-weight: bold;margin-bottom: 30px;text-align: center;">修改密码</p>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item style="margin-top: 20px;" label="手机号：">
          <el-input v-text="this.userPhone"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 20px;" label="新密码：">
          <el-input style="width: 300px;" v-model="form.password" placeholder="设置新密码" show-password></el-input>
          <!-- <el-input type="password" v-model="form.name"></el-input> -->
        </el-form-item>
        <el-form-item label="确认密码：">
          <el-input style="width: 300px;" show-password v-model="form.affirmPWD" placeholder="请确认新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" round @click="revise(form.password,form.affirmPWD)">下一步</el-button>
          <el-button size="medium" round @click="xiugaimima = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { regionData } from 'element-china-area-data'
export default {
  data () {
    return {
      xiugaimima: false,
      srcA: '',
      Address: '',
      userPhone: this.$route.query.userPhone, // 获取登录的手机号
      dialogVisible: false, // 查看图片弹窗
      dialogImageUrl: '',
      fileList1: [], // 上传头像数组
      regionData, // 地区对象
      form: {}, // 修改个人信息对象,
      pickerOptions: { // 生日选择器功能
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      birthday: '', // 生日
      file: File
    }
  },
  mounted () {
    this.aa()
  },
  methods: {
    isname (name) {
      this.zhuceData.loginName = name.replace(/[\u4e00-\u9fa5/\s+/]|[`~!@#$%^&*() \\+ =<>?"{}|, \\/ ;' \\ [ \] ·~！@#￥%……&*（）—— \\+ ={}|《》？：“”【】、；‘’，。、_.-:]/g, '')
    },
    preserve () {
      // this.form.userAddress = this.form.pickLocation
      // this.Address = ''
      if (this.form.pickLocation !== undefined) {
        this.Address = this.form.pickLocation.join(',')
        this.form.userAddress = this.Address
      }
      const formData = new FormData()
      if (this.file !== File) {
        formData.append('file', this.file, this.file.fileName)
      }

      formData.append('id', this.form.id)
      formData.append('userName', this.form.userName)
      formData.append('userPhone', this.form.userPhone)
      formData.append('userEmail', this.form.userEmail)
      formData.append('userPassword', this.form.userPassword)
      formData.append('userStatus', this.form.userStatus)
      formData.append('userAddress', this.form.userAddress)
      formData.append('imageId', this.form.imageId)
      this.$axios.post('/clientuser/clientUserUpdate', formData).then(res => {
        if (res.data.flag) {
          sessionStorage.setItem('token', res.data.obj)
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$router.go(0)
        } else {
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        }
      })
    },
    revise (password, affirmPWD) {
      if (password === affirmPWD) {
        this.form.userPassword = password
        this.$axios.post('/clientuser/revisePassWord', this.form).then(res => {
          if (res.data.flag) {
            sessionStorage.setItem('token', res.data.obj)
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$router.push('/login')
            this.xiugaimima = false
          } else {
            this.$message({
              message: res.data.code,
              type: 'error'
            })
          }
        })
      } else {
        alert('两次输入不一致')
      }
    },
    aa () {
      const token = sessionStorage.getItem('token')
      this.$axios.get('/clientuser/queryByDelToken', {
        params: {
          token: token
        }
      }).then(res => {
        if (res.data.flag) {
          this.form = res.data.obj
          if (this.fileList1 !== undefined) {
            this.fileList1.push({ url: 'http://101.43.223.224:8765/image/getImageById?id=' + this.form.imageId })
          } else {
            console.log('')
          }
        } else {
          alert(res.data.code)
        }
      })
    },
    openChangePassword () { // 点击修改密码打开修改密码弹窗
      this.xiugaimima = true
    },
    afterRead (event) {
      this.file = event.raw
      debugger
    },
    // 图片上传的一些方法1
    handleRemove (file, fileList) {
      this.file = File
      debugger
      // this.fileList.remove('url')
      console.log(file, fileList)
    },
    // 图片上传的一些方法1
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      debugger
    },
    // 提示信息
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/.el-input__inner{
    height: 30px;
  }
</style>
